<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>create relation</title>

<link rel="stylesheet"
	href="<c:url value="/resources/css/relation/createRelation.css"/>" />

<link rel="stylesheet"
	href="<c:url value="/resources/lib/bootstrap-3.3.5/css/bootstrap.min.css"/>" />
<link rel="stylesheet"
	href="<c:url value="/resources/lib/bootstrap-3.3.5/css/bootstrap-theme.min.css"/>" />
<script src="<c:url value="/resources/lib/jquery-2.1.4.min.js" />"
	type="text/javascript"></script>
<script
	src="<c:url value="/resources/lib/bootstrap-3.3.5/js/bootstrap.min.js" />"
	type="text/javascript"></script>

<!--  local js-->
<script src="<c:url value="/resources/js/util/localFolderChoose.js" />"
	type="text/javascript"></script>
<script type="text/javascript"
	src="<c:url value="/resources/js/relation/createRelation.js" />"></script>
</head>
<body>
	<header class="text-center">
		<h1>create relation</h1>
	</header>

	<section class="container col-md-12">

		<c:choose>
			<c:when test="${isInitial}">
				<div class="col-md-12">
					<div class="form-group">
						<label for="endpoint">end point:</label> <input type="text"
							class="form-control" id="endpoint" name="endpoint" disabled
							value="${endpoint}">
					</div>
				</div>

				<div class="col-md-12">
					<label for="csvFileChoose">choose a folder :</label>
					<div id="csvFileChoose" class="form-group"></div>
					<div class="form-group">
						<input type="button" id="getCsvFiles" value="show files"
							class="btn btn-default" />
					</div>
				</div>

				<div class="col-md-6">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th colspan="2">choose CSV template file</th>
							</tr>
						</thead>
						<tbody id="viewBody">

						</tbody>
					</table>
				</div>

				<div class="col-md-6">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th colspan="2">choose soap method</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${operationNames}" var="item">
								<tr>
									<td>${item}</td>
									<td><input type="checkbox" class="operationName"
										value="${item}" /></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>

				<div class="form-group col-md-12">
					<label for="relationFileName">relation File name:</label> <input
						type="text" class="form-control" id="relationFileName"
						name="relationFileName" value="">
				</div>
				<div class="form-group col-md-12">
					<label>save to:</label>
					<div id="SavePathChoose"></div>
				</div>
				<div class="col-md-12 text-center">
					<div class="form-group">
						<input type="button" value="create relation file"
							id="createRelationFile" class="btn btn-default">
					</div>
				</div>
				<h5 id="messageArea"></h5>
			</c:when>
			<c:otherwise>
				<div class="col-md-12">
					<div class="form-group">
						<label for="endpoint">end point:</label> <input type="text"
							class="form-control" id="endpoint" name="endpoint"
							value="${endpoint}">
					</div>
					<div class="form-group">
						<input type="button" value="connect" id="endpoint-btn"
							class="btn btn-default">
					</div>
					<h5 id="messageArea">server is not connect to endpoint, please
						connect...</h5>
				</div>
			</c:otherwise>
		</c:choose>

	</section>

</body>
</html>